<template>
  <div class="page">
    <!-- 其他，如果有 -->
    <!-- 搜索 -->
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="ruleForm"
      >
        <el-form-item>
          <el-cascader
            placeholder="请选择部门"
            v-model="alone.searchForm.data.deptId"
            :props="orgCascaderCp.config.props"
            :options="orgSupAjax.data"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入运营昵称/姓名搜索"
            v-model="alone.searchForm.data.operatorName"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 正文 -->
    <div class="c-main p20">
      <div class="clearfix">
        <div>
          <el-button type="text" disabled=""
            >总成本刷新时间：{{ refreshTimeAjax.data.time || 0 }}</el-button
          >
          <el-button type="text" class="ml20" @click="rRefreshData"
            >刷新</el-button
          >
        </div>
      </div>
      <!-- 汇总 -->
      <div class="clearfix mt10">
        <div class="fl">总共：{{ pageAjax.paging.total }} 条</div>
      </div>
      <!-- 相关 -->

      <div class="c-section">
        <!-- 辅助如全选 -->
        <!-- <div class="c-head"></div> -->
        <!-- 内容 -->
        <div class="c-body">
          <el-table
            :data="pageAjax.data"
            stripe
            style="width: 100%"
            row-key="id"
          >
            <el-table-column label="运营昵称" width="130">
              <template slot-scope="scope">
                <!-- <img class="c-avatar" :src="scope.row.avatarUrl" alt="" /> -->
                <span>{{ scope.row.nickName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="nickName" label="姓名">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.realName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="部门">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.departmentName || "0" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="总成本">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.totalCost || "0" }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:seestar_detail
                  @click="rNavToDetail(scope.row.id)"
                  >详情</el-button
                >

                <span v-hasAuth:seestar_detail.invert>—</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部 -->
      </div>
    </div>
  </div>
</template>
<script>
import {
  getFinalCostPersonal,
  getRefreshTime,
  refreshData
} from "@/api/finance.js";
import { getOffspringnTree } from "@/assets/js/util.js";
import _ from "lodash";

export default {
  name: "seestar_potentialList",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    orgSupAjax: {
      loading: false,
      data: [],
      orginData: []
    },
    refreshTimeAjax: {
      data: {
        time: ""
      }
    },
    alone: {
      searchForm: {
        loading: false,
        data: {
          deptId: []
        }
      }
    },
    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          multiple: true,
          emitPath: false,
          checkStrictly: true
        }
      }
    }
  }),
  created() {
    let _that = this;
    _that.getPageData();
    _that.getOrgData();
    _that.getRefreshTimeData();
  },
  methods: {
    rSubmitSearchForm() {
      let _that = this;

      _that.pageAjax.lock = false;

      _that.getPageData();
    },
    // 同步易快报数据到数据库
    rRefreshData() {
      let loading = this.$loading();
      let _that = this;
      refreshData()
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "获取失败");
            _that.getRefreshTimeData();
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);

      let data = { ...searchForm.data };
      _that.pageAjax.loading = true;
      if (data.deptId.length) {
        data.deptIds = data.deptId.join(",");
      }
      delete data.deptId;
      getFinalCostPersonal({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
          _that.alone.searchForm.loading = false;
        });
    },
    getRefreshTimeData() {
      let _that = this;
      getRefreshTime().then(resp => {
        let respData = resp.data || {};

        if (respData.code === _that.STATUS.success[0]) {
          _that.refreshTimeAjax.data.time = respData.data;
        } else {
          _that.$message.error(respData.msg || "获取失败");
        }
      });
    },
    getOrgData() {
      let _that = this;
      _that.$store.dispatch("getDepartmentList").then(() => {
        let arr = _.cloneDeep(_that.$store.state.departmentList) || [];
        _that.orgSupAjax.data = getOffspringnTree(_.cloneDeep(arr), 0);
      });
    },

    rNavToDetail(id) {
      this.$router.push({ name: "finance_personalList", query: { id: id } });
    }
  }
};
</script>
<style lang="scss" scoped></style>
